<body>
    <link rel="stylesheet" type="text/css" href="resources/css/mappanel.css"/>

<div class='legend'>
  <table class='insitu'>
    <tr>
      <td class='head' colspan=2>In Situ Icons</td>
    </tr>
    <tr>
      <td><img src='resources/images/legend/buoy-default.png'></td>
      <td>Buoys</td>
    </tr>
    <tr>
      <td><img src='resources/images/legend/land_station-default.png'></td>
      <td>Land Station</td>
    </tr>
    <tr>
      <td><img src='resources/images/legend/shore_station-default.png'></td>
      <td>Shore Station</td>
    </tr>
  </table>
  <table class='remotesensing'>
    <tr>
      <td class='head'>Sea Surface Temperature</td>
    </tr>
    <tr>
      <td><img src='resources/images/legend/InterpolatedSST.png'></td>
    </tr>  
  </table>
  <table class='radarcurrents'>
    <tr>
      <td class='head'>HF Radar Currents</td>
    <tr>
      <td class='units'>Knots</td>
    </tr>
    </tr>
    <tr>
      <td><img src='resources/images/legend/currents_legend.png'></td>
    </tr>  
  </table>
  <table class='waterlevel'>
    <tr>
      <td class='head'>Water Level</td>
    <tr>
      <td class='units'>MLLW in Meters</td>
    </tr>
    </tr>
    <tr>
      <td><img src='resources/images/legend/water_level.png'></td>
    </tr>  
  </table>
</div> 
</body>